<template>
	<view class="content">
		<view class="userinfo">
			<image class="userimg" :src="src"></image>
			<button class="click_login" @click="uploadAvatar()">个人信息</button>
		</view>
		<view class="uni-list me-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="bindSetting">
				<view class="uni-media-list uni-list-cell-navigate uni-navigate-right">
					<image class="uni-media-list-logo" src="../../../static/shezhi.png"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top me-list-setting">设置</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view>
			<button @click="test()">
				测试点击上传图片
			</button>
		</view> -->
		<view>
			<view @click="getOrderList">我的订单</view>
			<view v-if="isShow">
				<view v-if="orderList.length!=0">
					<view v-for="(item) in orderList">
						<uni-list>
							<uni-list-item :title="item['ordertime']" :rightText="item['order_list'][0]['orderstate']"
								:note="item['shippingaddr']" @click="getClicked(item.orderid_list[0])" clickable="true">
							</uni-list-item>
						</uni-list>
					</view>
				</view>
				<view v-else>您暂时没有订单，去看看商品吧~</view>
			</view>
		</view>
		<view style="height: 80px;"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				customerinfo: '',
				src: "../../../static/mine/user.png",
				isShow: false,
				orderList: []
			};
		},
		computed: mapState(['hasLogin', 'userName', 'userType']),
		methods: {
			...mapMutations(['show']),
			bindSetting() {
				console.log("here")
				uni.navigateTo({
					url: '../../pages/denglu/logout/logout',
					fail(e) {
						console.log(e)
					}
				})
			},
			uploadAvatar() {
				uni.getUserInfo({
					provider: 'weixin',
					success: (res) => {
						console.log(res)
						this.customerinfo = res.userInfo;
						this.src = this.customerinfo.avatarUrl;
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			test() {
				// let url='http://127.0.0.1:8000';
				let url = 'http://81.68.232.29:8000';
				url += '/users/imgViews/'
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							formData: {
								'tele': this.userName
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				});
			},
			getOrderList() {
				this.isShow = !this.isShow;
				if (this.isShow) {
					this.$myRequest({
						url: '/assets/get_order_list_by_custelenumber/',
						data: {
							'telenumber': this.userName
						}
					}).then(res => {
						console.log(res.data);
						this.orderList = res.data;
					})
				}
			},
			getClicked(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/tabBar/order/orderdetail/orderdetail?orderid=' + id
				})
			}
		},
		created() {
			console.log(this.src);
			console.log(this.userName);
			this.show();
			console.log(this.src);
			console.log(this.userName);


			const res = this.$myRequest({
				url: '/users/get_avatar/',
				data: {
					"telenumber": this.userName
				}
			}).then(response => {
				console.log(response.data);
				if (response.data === "用户还未上传头像") {

					uni.showModal({
						title: '请点击确认授权',
						content: '我们需要您确认授权来获取您的头像信息',
						success: (res) => {
							if (res.confirm) {
								uni.getUserInfo({
									provider: "weixin",
									success: (res) => {
										const rs = this.$myRequest({
											url: "/users/upload_avatar/",
											data: {
												"telenumber": this.userName,
												"avatarurl": res.userInfo.avatarUrl
											}
										}).then(response => {
											this.src = res.userInfo.avatarUrl;
											this.customerinfo = res.userInfo;
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					this.customerinfo = response.data;
					this.src = response.data['avatarurl'];
				}
			})
		}
	}
</script>

<style>
	page {
		background-color: #efeff4;
	}

	.me-list {
		margin-top: 40upx;
	}

	.uni-list:before {
		height: 0upx;
	}

	.uni-list:after {
		height: 0upx;
	}

	.uni-list-cell:after {
		height: 0upx;
	}

	.me-list-logo {
		width: 120upx;
		height: 120upx;
		border-radius: 15upx;
		margin-right: 30upx;
	}

	.me-list-body {
		height: 120upx;
	}

	.me-list-text {
		padding-top: 8upx;
		font-size: 1.2em;
		line-height: 1.2em;
		font-weight: bold;
	}

	.me-list-bottom {
		padding-bottom: 8upx;
		font-size: .8em;
		line-height: 1.2em;
	}

	.me-list-setting {
		font-size: 1em;
		line-height: 2.3em;
	}

	.userinfo {
		border: #fff 1px solid;
		position: relative;
		height: 120px;
	}

	.userimg {
		width: 60px;
		height: 60px;
	}

	.click_login {
		width: 120px;
		height: 30px;
		border: #fff 1px solid;
		border-radius: 15px;
		text-align: center;
		font-size: 20px;
		line-height: 20px;
		position: absolute;
		top: 30px;
		right: 20px;
	}

	.icon-shoucang {
		width: 55px;
		height: 55px;
		display: inline-block;
	}

	.shoucang-icon {
		margin-left: 33px;
		width: 125px;
	}
</style>
